<template>
	<div>
	  	<template v-for="(item,index) in menuList">
		  	<el-menu-item :index="item.path" v-if="validatenull(item.children)">
		        <i :class="'el-'+item.ico" class="iconfont"></i>
		        <span slot="title">{{item.name}}</span>
		    </el-menu-item>
		    <el-submenu v-else :index="item.path?item.path:index+''" :key="item.name">
			    <template slot="title">
		          	<i :class="'el-'+item.ico" class="iconfont"></i>
		          	<span slot="title">{{item.name}}</span>
		        </template>
		        <template v-for="(child,cindex) in item.children">
		          	<el-menu-item :index="child.path" v-if="validatenull(child.children)" :key="child.name">
		            	<i :class="'el-'+child.ico" class="iconfont"></i>
		            	<span slot="title">{{child.name}}</span>
		          	</el-menu-item>
		        </template>
		    </el-submenu>
	    </template>
	</div>
</template>
<script>
	import { validatenull } from '@/util/validate';
	export default {
		name:'sidebarItem',
		props:{
			menuList:{
				type:Array
			}
		},
		data(){
			return {
				isCollapse: false
			}
		},
		methods:{
			validatenull (val) {
		      return validatenull(val);
		    },
			handleOpen(){

			},
			handleClose(){

			}
		}
	}
</script>
<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>